<template>
  <view class="home u-flex-col">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="筛选"
      back-icon-color="#fff"
      title-color="#fff"
    ></u-navbar>

    <view class="u-p-l-20 u-p-r-20 form">
      <u-form :model="form" ref="uForm">
        <!-- <u-form-item
          v-if="!form.isCustomerQuery"
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="区县"
          prop="countyNo"
        >
          <b-select-radio
            v-model="form.countyNo"
            :options="countyList"
            placeholder="请选择区县名称"
            :placeholder-style="placeholderStyle"
            :input-style="inputStyle"
            :cancel-style="customStyle"
            :submit-style="submitStyle"
            :search-icon="searchSrc"
            valueKey="id"
            clearable
          ></b-select-radio>
        </u-form-item> -->
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="煤矿名称"
          prop="customerNo"
        >
          <b-select-radio
            v-model="form.customerNo"
            :options="customerList"
            placeholder="请选择煤矿名称"
            :placeholder-style="placeholderStyle"
            :input-style="inputStyle"
            :cancel-style="customStyle"
            :submit-style="submitStyle"
            :search-icon="searchSrc"
            valueKey="id"
            clearable
          ></b-select-radio>
        </u-form-item>
        <template>
          <u-form-item
            :border-bottom="false"
            :label-style="labelStyle"
            label-position="top"
            label="时间"
            prop="beginDate"
          >
            <div class="time-body">
              <view class="flex date">
                <template v-if="new Date(form.endDate).getTime() > new Date(lastMonth).getTime()">
                  <u-button
                    v-for="(obj, i) in dateTypeListTwo"
                    :key="obj"
                    :type="form.btType === i ? 'primary' : 'default'"
                    class="bt"
                    @click.native="monthDay(i, 'hasNext')"
                    >{{ obj }}</u-button
                  >
                </template>
                <template v-else>
                  <u-button
                    v-for="(obj, i) in dateTypeList"
                    :key="obj"
                    :type="form.btType === i ? 'primary' : 'default'"
                    class="bt"
                    @click.native="monthDay(i, '')"
                    >{{ obj }}</u-button
                  >
                </template>
              </view>
              <uni-datetime-picker
                type="date"
                :border="false"
                placeholder="请选择开始日期"
                :end="end"
                return-type="timestamp"
                v-model="form.beginDate"
                @change="changeDate('0')"
              />
            </div>
          </u-form-item>
          <u-form-item :border-bottom="false" label-position="top" prop="endDate">
            <div class="time-body">
              <uni-datetime-picker
                type="date"
                :border="false"
                placeholder="请选择结束日期"
                :start="start"
                :end="endTime"
                return-type="timestamp"
                v-model="form.endDate"
                @change="changeDate('1')"
              />
            </div>
          </u-form-item>
        </template>
      </u-form>
    </view>
    <view class="confrim-btn u-flex u-row-between u-p-t-20">
      <u-button
        :hair-line="false"
        shape="circle"
        form-type="reset"
        :custom-style="formCustomStyle"
        throttle-time="500"
        @click="reset"
        >重置</u-button
      >
      <u-button
        :hair-line="false"
        shape="circle"
        :custom-style="formSubmitStyle"
        form-type="submit"
        throttle-time="500"
        @click="submit"
        >确定</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "screen",
  data() {
    return {
      dateTypeList: ["最近30天", "上一月", "下一月", "当月"],
      dateTypeListTwo: ["最近30天", "上一月", "当月"],
      emitEvent: "",
      riskTypeShow: false,
      form: {
        countyNo: "",
        countyStr: "",
        btType: "", //时间选择
        customerNo: "", //企业编码
        customerName: "", //企业名称
        beginDate: "", //开始时间
        endDate: "", // 结束时间
      },
      rules: {},
      // 报警状态按钮组组件样式
      customBtnStyle: {
        background: "#fff",
        border: "1px solid #fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        fontWeight: 400,
        color: "#666666",
      },
      customCheckStyle: {
        background: "#fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        border: "1px solid #288CFE",
        fontWeight: 400,
        color: "#288CFE",
      },
      labelStyle: {
        color: "#333333",
        fontWeight: "600",
      },
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      form: {},
      inputStyle: {
        background: "#fff",
        height: "80rpx",
        paddingLeft: "80rpx",
        color: "#999999",
        borderRadius: "20rpx",
      },
      placeholderStyle: "color:#999999;",
      searchSrc: require("@/static/image/search.png"),
      formCustomStyle: {
        color: "#000",
        border: "1rpx solid #ddd",
        background: "#fff",
        width: "40%",
      },
      formSubmitStyle: {
        color: "#ffffff",
        background: "#288CFE",
        width: "40%",
        border: "none",
      },
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: "#333333",
        background: "#eeeeee",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      submitStyle: {
        color: "#fff",
        background: "#288CFE",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      customerList: [],
      countyList: [],
      start: "",
      end: "",
      endTime: "",
      isJt: false,
      lastMonth: "",
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.endTime = this.$date(new Date().getTime() - 24 * 3600 * 1000).substring(0, 10);
    this.$refs.uForm.setRules(this.rules);
  },
  async mounted() {
    uni.showLoading();
    this.isJt = getApp().globalData.userInfo.customerAuth;
    await this.getCustomerList();
    await this.getCountyList();
    this.initTime();
  },
  watch: {
    "form.countyNo"(val) {
      this.getCustomerList();
    },
  },
  methods: {
    changeDate() {
      this.form.btType = "";
      this.$nextTick(() => {
        this.start = this.$date(this.form.beginDate).substring(0, 10);
        this.end = this.$date(this.form.endDate).substring(0, 10);
      });
    },
    /**
     * 初始时间范围
     */
    initTime() {
      const { beginDate, endDate } = this.form;
      const date = this.$getMonthInfo(-1, this.$u.date().substring(0, 8) + "10");
      this.lastMonth = date[0].substring(0, 10);
      if (beginDate && endDate) {
        this.$nextTick(() => {
          this.start = this.$date(this.form.beginDate).substring(0, 10);
          this.end = this.$date(this.form.endDate).substring(0, 10);
        });
      } else {
        this.form.btType = 0;
        const date = this.$timeScopeThirtyDaysNoToday();
        this.start = date[0].substring(0, 10);
        this.end = date[1].substring(0, 10);
        this.form.beginDate = this.start;
        this.form.endDate = this.end;
      }
      uni.hideLoading();
    },
    monthDay(val, type) {
      const date = this.$u.date();
      this.$nextTick(() => {
        if (new Date(this.form.endDate).getTime() > new Date(this.lastMonth).getTime()) {
          if (!type) {
            this.$set(this.form, "btType", "");
          } else {
            this.$set(this.form, "btType", 2);
          }
        }
        const initDate = this.form.endDate ? this.form.endDate : this.$u.date();
        this.form.btType = val;

        if (val === 0) {
          const date = this.$timeScopeThirtyDaysNoToday();
          this.$set(this.form, "beginDate", date[0].substring(0, 10));
          this.$set(this.form, "endDate", date[1].substring(0, 10));
        } else if (val === 1) {
          const date = this.$getMonthInfo(-1, initDate.substring(0, 8) + "10");
          this.$set(this.form, "beginDate", date[0].substring(0, 10));
          this.$set(this.form, "endDate", date[1].substring(0, 10));
        } else if (val === 2) {
          if (new Date(this.form.endDate).getTime() > new Date(this.lastMonth).getTime()) {
            this.form.beginDate = this.$timeScopeThisMonth()[0].substring(0, 10);
            this.form.endDate = date.substring(0, 10);
            this.$set(this.form, "btType", 2);
          } else {
            const date = this.$getMonthInfo(1, initDate.substring(0, 8) + "10");
            this.$set(this.form, "beginDate", date[0].substring(0, 10));
            this.$set(this.form, "endDate", date[1].substring(0, 10));
            if (new Date(this.form.endDate).getTime() > new Date(this.lastMonth).getTime()) {
              this.$set(this.form, "btType", "");
            }
          }
        } else if (val === 3) {
          this.form.beginDate = this.$timeScopeThisMonth()[0].substring(0, 10);
          this.form.endDate = date.substring(0, 10);
          if (new Date(this.form.endDate).getTime() > new Date(this.lastMonth).getTime()) {
            this.$set(this.form, "btType", 2);
          } else {
            this.$set(this.form, "btType", 3);
          }
        }
      });

      this.$nextTick(() => {
        this.start = this.$date(this.form.beginDate).substring(0, 10);
        this.end = this.$date(this.form.endDate).substring(0, 10);
      });
    },
    verification() {
      let isSubmit = false;
      const date = new Date(this.form.endDate);
      const dateStart = new Date(this.form.beginDate);
      if (date && dateStart && dateStart.getTime() > date.getTime()) {
        uni.showToast({
          title: "结束时间必须大于开始时间",
          icon: "none",
        });
        isSubmit = false;
      } else {
        isSubmit = true;
      }
      return isSubmit;
    },
    //获取企业名称列表
    async getCustomerList() {
      const res = await this.$get(
        `/guard/common/getCustomers?countyNo=${this.form.countyNo ? this.form.countyNo : ""}`
      );
      if (res && res.body) {
        this.customerList = res.body.map((item) => {
          return { ...item, name: item.label, disabled: false };
        });
        if (!this.customerList.some((item) => item.id === this.form.customerNo)) {
          this.form.customerNo = "";
        }
      }
    },
    //获取企业名称列表
    async getCountyList() {
      const res = await this.$get(`/guard/common/getCounties`);
      if (res && res.body) {
        this.countyList = res.body.map((item) => {
          return { ...item, name: item.label, disabled: false };
        });
      }
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            beginDate: this.form.beginDate ? this.$date(this.form.beginDate).substring(0, 10) : "",
            endDate: this.form.endDate ? this.$date(this.form.endDate).substring(0, 10) : "",
          };
          if (this.verification()) {
            uni.$emit(this.emitEvent, params);
            uni.navigateBack({
              delta: 1,
            });
          } else {
            return;
          }
        } else {
        }
      });
    },
    reset() {
      const date = this.$timeScopeThirtyDaysNoToday();
      this.start = date[0].substring(0, 10);
      this.end = date[1].substring(0, 10);
      this.form = {
        ...this.form,
        btType: 0, //时间选择
        customerNo: "", //企业编码
        customerName: "", //企业名称
        countyNo: "",
        countyStr: "",
        beginDate: this.start, //开始时间
        endDate: this.end, // 结束时间
      };
      this.initTime();
      uni.$emit("handClickScreen", this.form);
      this.$refs.uForm.resetFields(this.rules);
      this.getCustomerList();
    },
  },
  onLoad(options) {
    const { form, emitEvent } = options;
    if (form) {
      this.form = JSON.parse(form);
    }
    this.emitEvent = emitEvent;
    this.getCustomerList();
    // if (!this.isJt) {
    //   this.form.countyNo = getApp().globalData.userInfo.countyNo;
    // }
  },
};
</script>

<style lang="scss" scoped>
// 背景
page {
  background: #f7f7fa;
}
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .date {
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    .bt {
      border-radius: 50px;
      flex-basis: 25%;
      margin: 5px 5px;
      &:after {
        border-radius: 50px;
      }
    }
  }

  .form {
    height: calc(100% - 130px);
    /deep/.u-form {
      height: 100%;
      overflow: auto;
    }
    /deep/.u-form-item {
      padding: 0;
    }
    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }
    .summ {
      width: 100%;
      padding: 0rpx 28rpx;
      justify-content: space-between;
      > view {
        background: #fff;
        border-radius: 8rpx;
        text-align: center;
        color: #999;
        font-weight: bold;
        width: 48%;
        padding: 20rpx;
        > text {
          &:first-child {
            color: #3d5fff;
            padding-right: 10rpx;
          }
        }
      }
    }
  }
  .popup-content {
    padding: 24rpx;
    text-align: center;
    .checkbox {
      &-item {
        height: 100rpx;
        /deep/.u-checkbox__label {
          width: 100%;
          text-align: left;
        }
      }
      /deep/.u-checkbox-group {
        display: inline;
        .u-checkbox {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;
          .u-checkbox__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
      /deep/.u-radio-group {
        display: inline;
        .u-radio {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;
          height: 90rpx;
          .u-radio__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
    }
  }
  .confrim-btn {
    position: absolute;
    width: 100%;
    bottom: 20rpx;
    z-index: 1;
  }
}

.time-body {
  position: relative;
  width: 100%;
}
</style>
